
<!-- PICK A CELLPROP -->
<fieldset id="fldPickCellProp"><legend>{#stylelibrary_dlg.style_cell}</legend>

	<div class="pair" id="divTextAlign">
		<label>{#stylelibrary_dlg.cell_h_align}</label>
		<div class="controls">
			<select id="ddlTextAlign" onchange="cellPropPicked()">
				<option value="" selected="selected"></option>
				<option value="left">{#stylelibrary_dlg.horizontal_align_left}</option>
				<option value="center">{#stylelibrary_dlg.horizontal_align_center}</option>
				<option value="right">{#stylelibrary_dlg.horizontal_align_right}</option>
				<option value="justify">{#stylelibrary_dlg.horizontal_align_justify}</option>
			</select>
		</div>
	</div>

	<div class="pair" id="divVerticalAlign">
		<label>{#stylelibrary_dlg.cell_v_align}</label>
		<div class="controls">
			<select id="ddlVerticalAlign" onchange="cellPropPicked()">
				<option value="" selected="selected"></option>
				<option value="top">{#stylelibrary_dlg.vertical_align_top}</option>
				<option value="center">{#stylelibrary_dlg.vertical_align_center}</option>
				<option value="bottom">{#stylelibrary_dlg.vertical_align_bottom}</option>
			</select>
		</div>
	</div>

	<div class="pair" id="divCellBackgroundColor">
		<label>{#stylelibrary_dlg.cell_background_color}</label>
		<div class="controls">
			<table>
				<tr>
					<td>
						<input id="boxcolor" name="boxcolor" type="text" value="" size="9" onchange="updateColor('boxcolor_pick','boxcolor'); cellPropPicked()" />
					</td>
					<td>
						<span id="boxcolor_pickcontainer"><b id="boxcolor_pick">&nbsp;</b></span>
					</td>
					<td>
						<input type="button" value="{#stylelibrary_dlg.clear}" onclick="cellProp.delColors(); cellPropPicked()" />
					</td>
				</tr>
			</table>
		</div>
	</div>

	<div id="divPadding">
		<div class="pair">
			<label>{#stylelibrary_dlg.padding}</label>
			<div class="controls">
				<table>
					<tr>
						<td><input id="ddlPaddingTop" type="number" class="num" onchange="cellPropPicked()" min="0" /></td>
						<td id="lblPaddingTop">{#stylelibrary_dlg.padding_top}</td>
						<td>
							<label for="chkSamePadding">{#stylelibrary_dlg.same_for_all}</label>
							<input type="checkbox" id="chkSamePadding" onclick="cellProp.samePaddingClicked(); cellPropPicked()" />
						</td>
					</tr>
					<tr id="divPaddingBottom">
						<td><input id="ddlPaddingBottom" type="number" class="num" onchange="cellPropPicked()" min="0" /></td>
						<td>{#stylelibrary_dlg.padding_bottom}</td>
					</tr>
					<tr id="divPaddingLeft">
						<td><input id="ddlPaddingLeft" type="number" class="num" onchange="cellPropPicked()" min="0" /></td>
						<td>{#stylelibrary_dlg.padding_left}</td>
					</tr>
					<tr id="divPaddingRight">
						<td><input id="ddlPaddingRight" type="number" class="num" onchange="cellPropPicked()" min="0" /></td>
						<td>{#stylelibrary_dlg.padding_right}</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
	
	<div id="divRadius">
		<div class="pair">
			<label>{#stylelibrary_dlg.radius}</label>
			<div class="controls">
				<table>
					<tr>
						<td><input id="ddlRadiusTopLeft" type="number" class="num" onchange="cellPropPicked()" min="0" /></td>
						<td id="lblRadiusTopLeft">{#stylelibrary_dlg.radius_top_left}</td>
						<td>
							<label for="chkSameRadius">{#stylelibrary_dlg.same_for_all}</label>
							<input type="checkbox" id="chkSameRadius" onclick="cellProp.sameRadiusClicked(); cellPropPicked()" />
						</td>
					</tr>
					<tr id="divRadiusTopRight">
						<td><input id="ddlRadiusTopRight" type="number" class="num" onchange="cellPropPicked()" min="0" /></td>
						<td>{#stylelibrary_dlg.radius_top_right}</td>
					</tr>
					<tr id="divRadiusBottomLeft">
						<td><input id="ddlRadiusBottomLeft" type="number" class="num" onchange="cellPropPicked()" min="0" /></td>
						<td>{#stylelibrary_dlg.radius_bottom_left}</td>
					</tr>
					<tr id="divRadiusBottomRight">
						<td><input id="ddlRadiusBottomRight" type="number" class="num" onchange="cellPropPicked()" min="0" /></td>
						<td>{#stylelibrary_dlg.radius_bottom_right}</td>
					</tr>
				</table>
			</div>
		</div>
	</div>

	<div class="pair" id="divBoxShadow">
		<label>{#stylelibrary_dlg.box_shadow}</label>
		<div class="controls">
			<table>
				<tr>
					<td style="text-align: right">{#stylelibrary_dlg.box_shadow_x}</td>
					<td><input type="number" id="boxshadow_x" class="num" title="{#stylelibrary_dlg.box_shadow_x_desc}" onchange="cellPropPicked()" /></td>
					<td style="text-align: right">{#stylelibrary_dlg.box_shadow_y}</td>
					<td><input type="number" id="boxshadow_y" class="num" title="{#stylelibrary_dlg.box_shadow_x_desc}" onchange="cellPropPicked()" /></td>
					<td>
						<table>
							<tr>
								<td>
									<input id="boxshadowcolor" name="boxshadowcolor" type="text" value="" size="9" onchange="updateColor('boxshadowcolor_pick','boxshadowcolor'); cellPropPicked()" />
								</td>
								<td>
									<span id="boxshadowcolor_pickcontainer"><b id="boxshadowcolor_pick">&nbsp;</b></span>
								</td>
								<td>
									<input type="button" value="{#stylelibrary_dlg.clear}" onclick="cellProp.clearBoxShadow(); cellPropPicked()" />
								</td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
					<td>{#stylelibrary_dlg.box_shadow_blur}</td>
					<td><input type="number" id="boxshadow_blur" class="num" title="{#stylelibrary_dlg.box_shadow_blur_desc}" onchange="cellPropPicked()" /></td>
					<td>{#stylelibrary_dlg.box_shadow_spread}</td>
					<td><input type="number" id="boxshadow_spread" class="num" title="{#stylelibrary_dlg.box_shadow_spread_desc}" onchange="cellPropPicked()" /></td>
					<td>
						<label for="boxshadow_inset">{#stylelibrary_dlg.box_shadow_inset}</label>
						<input type="checkbox" id="boxshadow_inset" onclick="cellPropPicked()" />
					</td>
				</tr>
			</table>
		</div>
	</div>

	<div class="pair" id="divWidth">
		<label>{#stylelibrary_dlg.cell_width}</label>
		<div class="controls">
			<input type="text" size="8" id="txtWidth" maxlength="10" onchange="cellPropPicked()" />
		</div>
	</div>

	<div class="pair" id="divMinHeight">
		<label>{#stylelibrary_dlg.cell_min_height}</label>
		<div class="controls">
			<input type="text" size="8" id="txtMinHeight" maxlength="10" onchange="cellPropPicked()" />
		</div>
	</div>
</fieldset>

<script type="text/javascript">
cellProp = new simpleCellProperties();
</script>
